<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用props属性传递参数</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
    <ace v-for="item in items" v-bind:course="item"></ace>
</div>
<!--1.导入Vue.js-->
<!--注意：默认规则下 props 属性里的值不能为大写-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
    Vue.component("ace", {
        props: ['course'],
        template: '<li>{{course}}</li>'
    });
    let vm = new Vue({
        el: '#app',
        data: {
            items: ["java", "Linux", "前端"]
        }
    });
</script>
<!--
v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:course=“item”：将遍历的item项绑定到组件中props定义名为course属性上；
= 号左边的course为props定义的属性名，右边的为item in items 中遍历的item项的值
-->
</body>
</html>